<template>
  <div>
    <el-button type="primary" size="small" @click="visible = true">打开表单</el-button>

    <hf-dialog-form v-model:visible="visible" title="编辑用户" :options="options" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { FormOptions } from '../components/form/types'

const visible = ref(false)

let options: FormOptions[] = [
  {
    type: 'input',
    value: '',
    label: '用户名',
    prop: 'username', // 标识
    attrs: {
      style: {
        width: '120px',
      },
    },
    rules: [
      {
        // required: true,
        message: '用户名不能为空',
        // trigger 源码上添加
        trigger: 'blur',
      },
      {
        min: 2,
        max: 6,
        message: '用户名长度规范',
        trigger: 'blur',
      },
    ],
  },
  {
    type: 'input',
    value: '',
    label: '密码',
    prop: 'password', // 标识
    attrs: {
      showPassword: true,
      style: {
        width: '120px',
      },
    },
    rules: [
      {
        // required: true,
        message: '密码不能为空',
        // trigger 源码上添加
        trigger: 'blur',
      },
      {
        min: 6,
        max: 15,
        message: '用户名长度规范',
        trigger: 'blur',
      },
    ],
  },
  {
    type: 'select',
    value: '',
    label: '职位',
    prop: 'role', // 角色
    rules: [
      {
        required: true,
        message: '请选择职位',
        trigger: 'change',
      },
    ],
    children: [
      {
        type: 'option',
        value: '1',
        label: '经理',
        prop: 'jl',
      },
      {
        type: 'option',
        value: '2',
        label: '员工',
        prop: 'yg',
      },
    ],
    attrs: {
      // 设置样式
      style: {
        width: '120px',
      },
    },
  },
  {
    type: 'checkbox-group',
    value: [], // 设为 '',则不能选择 checkbox
    label: '爱好',
    prop: 'like',
    children: [
      {
        type: 'checkbox',
        label: '足球',
        value: 'football',
        prop: 'football',
      },
      {
        type: 'checkbox',
        label: '蓝球',
        value: 'basketball',
        prop: 'basketball',
      },
      {
        type: 'checkbox',
        label: '排球',
        value: 'paiqiu',
        prop: 'paiqiu',
      },
    ],
  },
  {
    type: 'radio-group',
    value: '',
    label: '性别',
    prop: 'gender',
    children: [
      {
        type: 'radio',
        label: '男',
        value: 'male',
        prop: 'male',
      },
      {
        type: 'radio',
        label: '女',
        value: 'female',
        prop: 'female',
      },
    ],
  },
  {
    type: 'upload',
    value: [], // 所提交文件的列表
    label: '附件',
    prop: '附件',
    action: 'http://127.0.0.1:4523/mock/697928/upload', // 上传地址, post 方法
    // rules: [
    //   {
    //     required: true,
    //     message: '文件不能为空',
    //     trigger: 'blur',
    //   },
    // ],
  },
  {
    type: 'editor',
    value: '编写文本',
    label: '描述',
    prop: 'desc',
    placeholder: '添加自己的描述信息吧',
  },
]
</script>

<style></style>
